<template>
  <div class="sjfx bigTableStyle">
    <div class="trees borderStyle">
      <el-tree
        ref="taskT"
        :data="TreeDatatp"
        :props="defaultProps"
        @node-click="handleNodeClick"
        icon-class="custom"
      ></el-tree>
    </div>
    <div class="right">
      <div class="tab">
        <div class="hade">
          <div>数据时间</div>
          <div>氢气</div>
          <div>甲烷</div>
          <div>乙烯</div>
          <div>乙炔</div>
          <div>乙烷</div>
          <div>分析</div>
        </div>
        <div class="con">
          <div>{{typeObj.Time}}</div>
          <div>{{typeObj.qq}}</div>
          <div>{{typeObj.jw}}</div>
          <div>{{typeObj.yx}}</div>
          <div>{{typeObj.yg}}</div>
          <div>{{typeObj.yw}}</div>
          <div>
            <el-button class="btn" @click="sjfx" type="primary">分析</el-button>
          </div>
        </div>
      </div>
      <div class="fxb">
        <h5>分析表</h5>
        <div class="tab2">
          <div class="hade">
            <div>项目</div>
            <div>乙炔和乙烷</div>
            <div>甲烷和氢气</div>
            <div>乙烯和丙烯</div>
          </div>
          <div class="con">
            <div>比值</div>
            <div>{{H2H4}}</div>
            <div>{{H4H2}}</div>
            <div>{{H4H6}}</div>
          </div>
          <div class="con">
            <div>码值</div>
            <div>{{MH2H4}}</div>
            <div>{{MH4H2}}</div>
            <div>{{MH4H6}}</div>
          </div>
        </div>
      </div>
      <div class="gzlxfx">
        <h5>故障类型分析(参考)</h5>
        <div class="tab-gz">
          <table>
            <thead>
              <tr>
                <th colspan="3" style="width: 6rem;">编码组合</th>
                <th rowspan="2" style="width: 2rem;">故障类型判断</th>
                <th rowspan="2">故障实例（参考）</th>
              </tr>
              <tr class="trs">
                <th>乙炔和乙烷</th>
                <th>甲烷和氢气</th>
                <th>乙烯和丙烯</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="5">0</td>
                <td>0</td>
                <td>1</td>
                <td>低温过热（低于150℃）</td>
                <td>绝缘导线过热，注意CO和CO2含量和CO2/CO值</td>
              </tr>
              <tr>
                <td>2</td>
                <td>0</td>
                <td>低温过热(150-300)</td>
                <td rowspan="3">分接开关接触不良，引线元件螺丝松动或接头焊接不良，满流引起烔过热，铁心漏磁，局部短路，层间绝缘不良，铁心多点锈等</td>
              </tr>
              <tr>
                <td>2</td>
                <td>1</td>
                <td>中温过热(300-700)</td>
              </tr>
              <tr>
                <td>0,1,2</td>
                <td>2</td>
                <td>高温过热(高于700℃)</td>
              </tr>
              <tr>
                <td>1</td>
                <td>0</td>
                <td>局部放电</td>
                <td>高湿温，高含气量引起系锡箔中低能量密度的局部放电</td>
              </tr>
              <tr>
                <td rowspan="2">1</td>
                <td>0.1</td>
                <td>0,1,2</td>
                <td>低能放电</td>
                <td rowspan="2">引线对电位未定的部件之间连续火花放电，分接抽头引线和油闪络。不同电位之间的油中火花放电或悬浮电位之间的火花放电</td>
              </tr>
              <tr>
                <td>2</td>
                <td>0,1,2</td>
                <td>低能放电兼过热</td>
              </tr>
              <tr>
                <td rowspan="2">2</td>
                <td>0.1</td>
                <td>0.12</td>
                <td>电弧放电</td>
                <td rowspan="2">相见闪络，分接头引线间油隙闪络，引线对箱壳放电，线圈烙断，分接开关，飞弧，电流引起电弧，引线对其他接地体放电等</td>
              </tr>
              <tr>
                <td>2</td>
                <td>0,1,2</td>
                <td>电弧放电兼过热</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { log } from "three";

@Component
export default class extends Vue {
  @Prop() treeList!: any;
  @Prop() equipment!: any;
  public defaultProps = {
    label: "name",
    children: "children",
  };
  //装置list数
  TreeDatatp = [];
  list() {
    // 过滤遥测
    var tableData = this.treeList.filter((v) => {
      return v.remoteType !== "2";
    });
    if (this.equipment) {
      var dataTree = JSON.parse(JSON.stringify(this.equipment));
      var MydataTree = [];
      dataTree.map((v) => {
        var obj1: any = {};
        obj1.name = v.bayName;
        obj1.bayId = v.bayId;
        obj1.id = v.id;
        obj1.children1 = [];
        obj1.myType = "jg";
        tableData.map((p) => {
          if (v.bayId == p.bayId) {
            var obj2: any = {};
            obj1.bayName = p.bayName;
            obj2.bayName = p.name;
            obj2.bayId = p.bayId;
            obj2.id = p.id;
            obj2.type = p.type;
            obj2.myType = "dw";

            obj2.typeName = p.typeName;
            obj2.value = p.value;
            obj2.Time=p.time
            obj1.children1.push(obj2);
            console.log();
          }
        });
        MydataTree.push(obj1);
        this.TreeDatatp = MydataTree;
      });
    }
    console.log(121, MydataTree, "asdsadasdasdasd");
    console.log(tableData);
  }
  //                                    
  typeList = ["030101", "030106", "030107", "030109", "030108"];
  typeObj:any = {
    Time:'',
    qq:'',
    jw:'',
    yx:'',
    yg:'',
    yw:'',
  };
  handleNodeClick(data) {
    if (data.children1 &&data.children1.length>0) {
      this.typeObj.Time=data.children1[0].Time
    }
      data.children1.map((p) => {
        if (p.type == "030101") { //氢气
          this.typeObj.qq=p.value||''
        }
        if (p.type == "030106") {//甲烷
          this.typeObj.jw=p.value||''
          
        }
        if (p.type == "030107") {//乙烯
          
          this.typeObj.yx=p.value||''
        }
        if (p.type == "030109") {//乙炔
          this.typeObj.yg=p.value||''
          
        }
        if (p.type == "030108") {//乙烷
          this.typeObj.yw=p.value||''
          
        }
      });
     console.log(this.typeObj);
  }
  H2H4=''
  H4H2=''
  H4H6=''
  MH2H4=''
  MH4H2=''
  MH4H6=''
    sjfx() {
      console.log(this.typeObj);
      
            let yx = this.typeObj.yx;
            let qq = this.typeObj.qq;
            let yw = this.typeObj.yw;
            if (yx == 0) {
                yx = 1;
            }
            if (qq == 0) {
                qq = 1;
            }
            if (yw == 0) {
                yw = 1;
            }
            
            this.H2H4 = (this.typeObj.yg / yx).toFixed();
            this.H4H2 = (this.typeObj.jw / qq).toFixed();
            this.H4H6 = (this.typeObj.yx / yw).toFixed();
            
            if (Number(this.H2H4) < 0.1) {
                this.MH2H4 = "0";
            }
            if (0.1 <= Number(this.H2H4) && Number(this.H2H4) < 1) {
                this.MH2H4 = "1";
            }
            if (1 <= Number(this.H2H4) && Number(this.H2H4) < 3) {
                this.MH2H4 = "1";
            }
            if (Number(this.H2H4) >= 3) {
                this.MH2H4 = "2";
            }
            if (Number(this.H4H2) < 0.1) {
                this.MH4H2 = '1';
            }
            if (0.1 <= Number(this.H4H2) && Number(this.H4H2) < 1) {
                this.MH4H2 = '0';
            }
            if (1 <= Number(this.H4H2) && Number(this.H4H2) < 3) {
                this.MH4H2 = '2';
            }
            if (Number(this.H4H2) >= 3) {
                this.MH4H2 = '2';
            }
            if (Number(this.H4H6) < 0.1) {
                this.MH4H6 = '0';
            }
            if (0.1 <= Number(this.H4H6) && Number(this.H4H6) < 1) {
                this.MH4H6 = '0';
            }
            if (1 <= Number(this.H4H6) && Number(this.H4H6) < 3) {
                this.MH4H6 = '1';
            }
            if (Number(this.H4H6) >= 3) {
                this.MH4H6 = '2';
            }
        }
  mounted() {
    this.list();
    this.handleNodeClick(this.TreeDatatp[0])
  }
}
</script>

<style lang="scss" scoped>
.sjfx {
  width: 100%;
  height: 5.5rem;
  display: flex;
  .trees {
    width: 2.2rem;
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
    padding: 0.02rem;
  }
  .right {
    width: calc(100% - 2.3rem);
    height: 100%;
    margin-left: 0.1rem;
  }
  .tab {
    width: 100%;
    height: 0.7rem;
    border-left: 1px solid #0a8fc1;
    border-top: 1px solid #0a8fc1;
    > div > div {
      flex: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #0a8fc1;
      border-right: 1px solid #0a8fc1;
    }
    > div > div:nth-child(1) {
      flex: 4;
    }
    > div > div:nth-child(7) {
      flex: 3;
    }
    .hade {
      width: 100%;
      height: 0.31rem;
      display: flex;
      // -webkit-box-shadow: #0a8fc1 0 0 10px inset;
      box-shadow: inset 0 0 10px #0a8fc1;
    }
    .con {
      width: 100%;
      height: 0.39rem;
      display: flex;
    }
  }
  h5 {
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
  }
  .fxb {
    width: 100%;
    height: 1.11rem;
    margin-top: 0.1rem;

    .tab2 {
      width: 100%;
      // height: calc(100% - 0.3rem);
      border-left: 1px solid #0a8fc1;
      border-top: 1px solid #0a8fc1;
      .hade {
        width: 100%;
        height: 0.27rem;
        display: flex;
        // -webkit-box-shadow: #0a8fc1 0 0 10px inset;
        box-shadow: inset 0 0 10px #0a8fc1;
      }
      .con {
        width: 100%;
        height: 0.27rem;
        display: flex;
      }
      > div > div {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #0a8fc1;
        border-right: 1px solid #0a8fc1;
      }
      > div > div:nth-child(1) {
        flex: 1;
      }
    }
  }
  .gzlxfx {
    width: 100%;
    height: calc(100% - 2.01rem);
    margin-top: 0.1rem;
    .tab-gz {
      height: calc(100% - 0.3rem);
      width: 100%;
      table {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        th,
        td {
          text-align: center;
          border: 1px solid #3885ee;
        }
      }
    }
  }
}
</style>

<style lang="scss" >
.sjfx {
  .btn {
    padding: 0 0.4rem;
  }
}
</style>